<script setup>
import { computed } from 'vue'
import { hasPermission } from '@/directives/permission'
import { useButtonStyle } from '@/composables/useButtonStyle.js'
// 正确使用组合式函数获取按钮样式
const buttonStyle = useButtonStyle()

const props = defineProps({
  goodsList: {
    type: Array,
    default: () => []
  },
  loadmoreStatus: {
    type: String,
    default: 'loadmore'
  },
  type: {
    type: String,
    default: 'outplan' // outplan or inplan
  },
  isOrderPage: { // 是否订单页面
    type: Boolean,
    default: false
  },
  isGoodsPage: { // 是否物料页面
    type: Boolean,
    default: false
  },
  editText: {
    type: String,
    default: '编辑'
  }
})
const pernGoods = computed(() => {
  if (props.isOrderPage) {
    return props.type
  } else if (props.isGoodsPage) {
    return 'material'
  } else {
    return props.type === 'outplan' ? 'outgoods' : 'ingoods'
  }
})

const emit = defineEmits(['clickEdit', 'clickDelete'])

const clickEdit = (item) => {
  emit('clickEdit', item)
}

const clickDelete = (item) => {
  emit('clickDelete', item)
}
</script>

<template>
  <view class="container">
    <view v-if="goodsList.length">
      <view class="material-card" v-for="item in goodsList" :key="item.id">
        <view class="card-content">
          <view class="info-item">
            <text class="label">物料编码：</text>
            <text class="value">{{ item.goodscode }}</text>
          </view>
          <view class="info-item" style="align-items: flex-start;">
            <text class="label">物料名称：</text>
            <text class="value">{{ item.goodsname }}</text>
          </view>
          <view class="info-item">
            <text class="label">批次号：</text>
            <text class="value">{{ item.batchno }}</text>
          </view>
          <view class="info-item">
            <text class="label">单位：</text>
            <text class="value">{{ item.unit }}</text>
          </view>
          <view class="info-item">
            <text class="label">实发数量：</text>
            <text class="value highlight">{{ item.actualnum }}</text>
          </view>
          <view class="info-item">
            <text class="label">毛重：</text>
            <text class="value highlight">{{ item.weight }}</text>
          </view>
        </view>

        <view class="card-actions">
          <u-button size="mini" type="primary" :custom-style="buttonStyle.customStyle"
            v-if="hasPermission(`logistics:${pernGoods}:edit`)" plain @click="clickEdit(item)">
            <u-icon name="edit-pen" size="30"></u-icon> {{ editText }}
          </u-button>
          <u-button size="mini" type="error" :custom-style="buttonStyle.customStyle"
            v-if="hasPermission(`logistics:${pernGoods}:remove`)" plain @click="clickDelete(item)">
            <u-icon name="trash" size="30"></u-icon> 删除
          </u-button>
        </view>
      </view>
      <u-loadmore margin-top="20rpx" margin-bottom="20rpx" :status="loadmoreStatus" />
    </view>
    <view v-else>
      <u-empty mode="list"></u-empty>
    </view>
  </view>
</template>

<style scoped lang="scss">
.material-card {
  background: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
  overflow: hidden;
  margin-bottom: 16rpx;
  padding: 24rpx;
}

.card-content {
  .info-item {
    display: flex;
    margin-bottom: 16rpx;
    align-items: center;
    font-size: $list-font-size;

    &:last-child {
      margin-bottom: 20rpx;
    }

    .label {
      color: $list-color;
      min-width: 140rpx;
      font-weight: 400;
    }

    .value {
      color: $list-color;
      font-weight: 500;
      word-break: break-all;
      flex: 1;

      &.highlight {
        color: #ff6b6b;
        font-weight: 500;
      }
    }
  }
}

.card-actions {
  display: flex;
  gap: 16rpx;
  justify-content: flex-end;
  border-top: 1rpx solid #f0f0f0;
  padding-top: 20rpx;
  margin-top: 8rpx;
}
</style>